<template>
  <div id="trafficMarket">
    <section
      class="relative"
      v-if="!(loading1 && loading2 && loading3 && loadingList) && LiveData"
    >
      <div class="traffic_market_top">
        <div class="header">
          <div class="header_left">
            <p class="title"> 正在直播</p>
            <p class="nowTime">{{ LiveData.create_time }}</p>
          </div>
          <div class="header_right">
            <span class="refreshTime" @click="update()">刷新</span>
            <el-tooltip
              class="item"
              effect="light"
              content="数据展示为当前时间正在开播的带货直播间数据，每十分钟统计更新一次"
              placement="bottom"
              popper-class="mytooltip"
            >
              <img
                src="@/assets/meng/search_result04.png"
                alt
                class="tooltip"
              />
            </el-tooltip>
          </div>
        </div>
        <div class="main">
          <!-- 带货直播间 -->
          <div class="main_box">
            <p class="liveRoom">带货直播间</p>
            <div class="live_room_count">
              <span class="count">{{
                format_num(LiveData.pro_room_count)
              }}</span>
              <span class="span">环比上刻&nbsp;</span>
              <span>
                <img
                  class="img"
                  src="@/assets/wang/live/up01.png"
                  v-if="LiveData.pro_room_count_rate > 0"
                />
                <img
                  class="img"
                  src="@/assets/wang/goods/ddown.png"
                  v-if="LiveData.pro_room_count_rate < 0"
                />
                <span
                  class="percent"
                  :class="{
                    upColor: LiveData.pro_room_count_rate > 0,
                    downColor: LiveData.pro_room_count_rate < 0,
                  }"
                  >{{ Math.abs(LiveData.pro_room_count_rate) }}%</span
                >
              </span>
            </div>
          </div>
          <i class="line"></i>
          <!-- 实时观看人数 -->
          <div class="main_box">
            <p class="liveRoom">实时观看人数</p>
            <div class="live_room_count">
              <span class="count">{{ format_num(LiveData.vistor_count) }}</span>
              <span class="span">环比上刻&nbsp;</span>
              <span>
                <img
                  class="img"
                  src="@/assets/wang/live/up01.png"
                  v-if="LiveData.vistor_count_rate > 0"
                />
                <img
                  class="img"
                  src="@/assets/wang/goods/ddown.png"
                  v-if="LiveData.vistor_count_rate < 0"
                />
                <span
                  class="percent"
                  :class="{
                    upColor: LiveData.vistor_count_rate > 0,
                    downColor: LiveData.vistor_count_rate < 0,
                  }"
                  >{{ Math.abs(LiveData.vistor_count_rate) }}%</span
                >
              </span>
            </div>
          </div>
          <i class="line"></i>
          <!-- 实时直播在售商品数 -->
          <div class="main_box">
            <p class="liveRoom">实时直播在售商品数</p>
            <div class="live_room_count">
              <span class="count">{{
                format_num(LiveData.pro_line_count)
              }}</span>
              <span class="span">环比上刻&nbsp;</span>
              <span>
                <img
                  class="img"
                  src="@/assets/wang/live/up01.png"
                  v-if="LiveData.pro_line_count_rate > 0"
                />
                <img
                  class="img"
                  src="@/assets/wang/goods/ddown.png"
                  v-if="LiveData.pro_line_count_rate < 0"
                />
                <span
                  class="percent"
                  :class="{
                    upColor: LiveData.pro_line_count_rate > 0,
                    downColor: LiveData.pro_line_count_rate < 0,
                  }"
                  >{{ Math.abs(LiveData.pro_line_count_rate) }}%</span
                >
              </span>
            </div>
          </div>
          <i class="line"></i>
          <!-- 实时直播预估销量 -->
          <div class="main_box">
            <p class="liveRoom">实时直播预估销量</p>
            <div class="live_room_count">
              <span class="count">{{ format_num(LiveData.volume) }}</span>
              <span class="span">环比上刻&nbsp;</span>
              <span>
                <img
                  class="img"
                  src="@/assets/wang/live/up01.png"
                  v-if="LiveData.volume_rate > 0"
                />
                <img
                  class="img"
                  src="@/assets/wang/goods/ddown.png"
                  v-if="LiveData.volume_rate < 0"
                />
                <span
                  class="percent"
                  :class="{
                    upColor: LiveData.volume_rate > 0,
                    downColor: LiveData.volume_rate < 0,
                  }"
                  >{{ Math.abs(LiveData.volume_rate) }}%</span
                >
              </span>
            </div>
          </div>
          <i class="line"></i>
          <!-- 实时直播预估销售额 -->
          <div class="main_box">
            <p class="liveRoom">实时直播预估销售额</p>
            <div class="live_room_count">
              <span class="count">{{ format_num(LiveData.amount) }}</span>
              <span class="span">环比上刻&nbsp;</span>
              <span>
                <img
                  class="img"
                  src="@/assets/wang/live/up01.png"
                  v-if="LiveData.amount_rate > 0"
                />
                <img
                  class="img"
                  src="@/assets/wang/goods/ddown.png"
                  v-if="LiveData.amount_rate < 0"
                />
                <span
                  class="percent"
                  :class="{
                    upColor: LiveData.amount_rate > 0,
                    downColor: LiveData.amount_rate < 0,
                  }"
                  >{{ Math.abs(LiveData.amount_rate) }}%</span
                >
              </span>
            </div>
          </div>
          <i class="line"></i>
          <!-- 实时带货直播间点赞数 -->
          <div class="main_box">
            <p class="liveRoom">实时带货直播间点赞数</p>
            <div class="live_room_count">
              <span class="count">{{
                format_num(LiveData.favorite_count)
              }}</span>
              <span class="span">环比上刻&nbsp;</span>
              <span>
                <img
                  class="img"
                  src="@/assets/wang/live/up01.png"
                  v-if="LiveData.favorite_count_rate > 0"
                />
                <img
                  class="img"
                  src="@/assets/wang/goods/ddown.png"
                  v-if="LiveData.favorite_count_rate < 0"
                />
                <span
                  class="percent"
                  :class="{
                    upColor: LiveData.favorite_count_rate > 0,
                    downColor: LiveData.favorite_count_rate < 0,
                  }"
                  >{{ Math.abs(LiveData.favorite_count_rate) }}%</span
                >
              </span>
            </div>
          </div>
        </div>
        <!-- loading -->
        <div
          v-loading="loading1"
          v-if="loading1"
          class="loading"
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
        ></div>
      </div>
      <!-- 直播电商趋势 -->
      <div class="live_trend">
        <div class="live_trend_header">
          <p class="title">直播电商趋势</p>
          <radio_group01
            :radio_values="['24小时', '近7天', '30天']"
            v-model="KindName"
            :vipLevel="vipLevel"
            class="tab01"
          />
        </div>
        <div class="trend_wrap">
          <div class="trend_list">
            <div
              class="trend_item"
              :style="{ borderColor: (item.active? item.color: '#e5e5e5'),color:(item.active? item.color: '#555')}"
              v-for="(item, index) in list"
              :key="index"
              @click="showLine(item)"
            >
              {{ item.name }}
            </div>
          </div>
          <LineChart
            v-if="timeStamp"
            :xData="timeStamp"
            :roomData_01="roomData"
            :shopCount_02="shopCount"
            :vistorCount_03="vistorCount"
            :favoriteCount_04="favoriteCount"
            :volume_05="volume"
            :amount_06="amount"
            :lineY="lineY"
            :tooltipTime="tooltipTime"
            @parentFlowID="parentID"
          />
        </div>
        <!-- loading -->
        <div
          v-loading="loading2"
          v-if="loading2"
          class="loading loading_warp"
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
        ></div>
      </div>
      <!-- 直播品类分布 -->
      <div class="liveCatecory">
        <template v-if="jurisdiction">
        <div class="TreeGraph_box">
          <p class="title">直播品类分布</p>
          <TreeGraph
            v-if="treeList.length"
            :Data="treeList"
            :type1="GMV"
            @cateID="childFn"
            @indexes="indexesFn"
            @listTitle="listTitleFn"
            class="TreeGraph"
          />
        </div>
        <div class="liveListBrand treeClass">
          <p class="title">{{ titleBrand }}二级类目</p>
          <!-- 判断有没有权限 -->
          <ul class="thead_second">
            <li>排名</li>
            <li>类目</li>
            <li>销售额</li>
          </ul>
          <div class="tbody_box">
            <ul
              v-for="(item, index) in this.liveBannerlist"
              :key="index"
              class="tbody_second"
              @click="getLiveCategoryRankAPI(item)"
            >
              <li>{{ index + 1 }}</li>
              <li class="brandText">
                <span> {{ item.category_name }}</span>
              </li>
              <li>{{ format_num(item.amount) }}</li>
            </ul>
          </div>
        </div>
        </template>
        <div class="Market_vip_wrap" v-else>
          <div class="Market_bgc_wrap">
            <div class="Market_left"></div>
            <div class="Market_right"></div>
          </div>
          <div class="payVip_wrap">
            <payVip class="pay_vip_box" routerName="FansPortrait" :lowestVipNum="5" :isResize='false'/>
          </div>
          
        </div>
        <!-- loading -->
        <!-- <div
          v-loading="loading3"
          v-if="loading3"
          class="loading"
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
        ></div> -->
      </div>
      <!-- 直播分类榜单 -->
      <div class="liveList">
        <!-- 判断有没有权限 -->
        <template  v-if="jurisdiction">
        <div class="liveListTalent">
          <p class="title">{{ titleList }}直播达人榜</p>
          <!-- 电商直播达人榜 -->
          <table class="myTable mytable01 publicTable">
            <thead>
              <tr>
                <th>排名</th>
                <th>达人</th>
                <th>销售额</th>
              </tr>
            </thead>
            <tbody
              v-if="rankList && rankList.live_author_rank"
              :class="{ noDataH: rankList && !rankList.live_author_rank }"
            >
              <tr
                v-for="(item, index) in rankList.live_author_rank"
                :key="index"
              >
                <td class="brandSaleNum">{{ index + 1 }}</td>
                <td>
                  <div class="infoBox">
                    <img
                      :src="item.author.logo"
                      v-errorImg:talent
                      @click="linkTalentDetail(item.author.author_id)"
                    />
                    <span @click="linkTalentDetail(item.author.author_id)">{{
                      item.author.nick_name
                    }}</span>

                    <img
                      v-if="item.author.verify_type == 1"
                      src="../../../../assets/meng/search_result02.png"
                    />
                    <img
                      v-if="item.author.verify_type == 2"
                      src="../../../../assets/meng/search_result03.png"
                    />
                  </div>
                </td>
                <td class="brandSaleNum">{{ format_num(item.amount) }}</td>
              </tr>
            </tbody>
            <div class="no_data" v-else>
              <img src="@/assets/shi/zanwushuju.png" alt />
              暂无数据
            </div>
          </table>
          <!-- loading -->
          <div
            v-loading="loadingList"
            v-if="loadingList"
            class="loading"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          ></div>
        </div>
        <div class="liveListShop">
          <p class="title">{{ titleList }}直播商品榜</p>
          <!-- 电商直播商品榜 -->
          <table class="myTable mytable02 goodsTable">
            <thead>
              <tr>
                <th>排名</th>
                <th style="text-align: left; padding-left: 10px">商品信息</th>
                <th>直播价</th>
                <th>销量</th>
                <th>销售额</th>
                <th>带货达人</th>
              </tr>
            </thead>
            <tbody
              v-if="rankList && rankList.live_pro_rank"
              :class="{ noDataH: rankList && !rankList.live_pro_rank }"
            >
              <tr v-for="(item, index) in rankList.live_pro_rank" :key="index">
                <td class="brandSaleNum">{{ index + 1 }}</td>
                <td>
                  <div class="goodsInfo" @click="linkGoodsDetails(item.pro_id)">
                    <img
                      v-if="item.pro_logo == null"
                      src="@/assets/img/shop.png"
                      alt
                    />
                    <img v-else :src="item.pro_logo" v-errorImg:shop />
                    <span>{{ item.pro_title }}</span>
                  </div>
                </td>
                <td
                  class="brandSaleNum"
                  style="color: #222"
                  v-if="item.min_price == item.max_price || item.max_price == 0"
                >
                  ￥{{ format_num(item.min_price) }}
                </td>
                <td
                  class="brandSaleNum"
                  style="color: #222"
                  v-if="item.min_price < item.max_price"
                >
                  ￥{{ format_num(item.min_price) }}-{{
                    format_num(item.max_price)
                  }}
                </td>

                <td class="brandSaleNum">{{ format_num(item.volume) }}</td>
                <td class="brandSaleNum">{{ format_num(item.amount) }}</td>
                <td>
                  <div class="infoBox" @click="toTalent(item.author.author_id)">
                    <span>{{ item.author.nick_name }}</span>
                  </div>
                </td>
              </tr>
            </tbody>
            <div class="no_data" v-else>
              <img src="@/assets/shi/zanwushuju.png" alt />
              暂无数据
            </div>
          </table>
          <div
            v-loading="loadingList"
            v-if="loadingList"
            class="loading"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          ></div>
        </div>
        <div class="liveListBrand">
          <p class="title">{{ titleList }}直播品牌榜</p>
          <table
            class="myTable mytable01 mytable03 publicTable"
            :class="{ noDataH: rankList && !rankList.live_brand_rank }"
          >
            <thead>
              <tr>
                <th>排名</th>
                <th>品牌</th>
                <th>销售额</th>
              </tr>
            </thead>
            <tbody v-if="rankList && rankList.live_brand_rank">
              <tr
                v-for="(item, index) in rankList.live_brand_rank"
                :key="index"
              >
                <td class="brandSaleNum">{{ index + 1 }}</td>
                <td>
                  <div class="brandText" @click="BrandDetails(item.brand_id)">
                    {{ item.brand_name }}
                  </div>
                </td>
                <td class="brandSaleNum Nnum">{{ format_num(item.amount) }}</td>
              </tr>
            </tbody>
            <div class="no_data" v-else>
              <img src="@/assets/shi/zanwushuju.png" alt />
              暂无数据
            </div>
          </table>
          <div
            v-loading="loadingList"
            v-if="loadingList"
            class="loading"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          ></div>
        </div>
        </template>
        <div class="list_vip_wrap" v-else>
          <payVip class="pay_vip_box" routerName="FansPortrait" :lowestVipNum="5" :isResize='false'/>
        </div>
      </div> 
    </section>
    <div
      v-loading="loading1 && loading2 && loading3 && loadingList"
      v-if="loading1 && loading2 && loading3 && loadingList"
      class="loading loading_warp bgLoading"
      element-loading-text="拼命加载中..."
      element-loading-spinner="el-icon-loading"
    ></div>
  </div>
</template>

<script>
import LineChart from "./LineChartTraffic.vue";
import TreeGraph from "@/component/tree_graph.vue";
import liveHoursRankVue from "../../../meng/live/liveHoursRank.vue";
export default {
  name: "trafficMarket",
  components: { LineChart, TreeGraph },
  data() {
    return {
      GMV: "GMV",
      //倒计时更新时间
      mTime: "10",
      sTime: "00",
      KindName: "24小时",
      newKindName: "24h", //直播电商趋势默认时间
      list: [
        {
          id: 1,
          name: "带货直播间",
          active: false,
          color: '#ffc39b'
        },
        {
          id: 2,
          name: "实时直播在售商品数",
          active: false,
          color: '#f4c14b'
        },
        {
          id: 3,
          name: "实时观看人数",
          active: false,
          color: '#fd7040'
        },

        {
          id: 4,
          name: "实时带货直播间点赞数",
          active: false,
          color: '#3ec0cc'
        },
        {
          id: 5,
          name: "实时直播预估销量",
          active: false,
          color: '#4c94f6'
        },
        {
          id: 6,
          name: "实时直播预估销售额",
          active: true,
          color: '#ff9149'
        },
      ],
      roomData: [], //带货直播间
      shopCount: [], //实时直播在售商品数
      vistorCount: [], //实时观看人数
      favoriteCount: [], //实时带货直播间点赞数
      volume: [], //实时直播预估销量
      amount: [], //实时直播预估销售额
      timeStamp: {
        data: [], //时间戳
        flowId: [], //折线图中获取的flow_id
      },
      LiveData: null, //正在直播列表数据
      treeList: [],
      rankList: {},
      lineY: false,
      childId: "",
      childFlowId: "",
      loading1: false,
      loading2: false,
      loading3: false,
      loadingList: false,
      liveBanner: [],
      liveBannerlist: [],
      titleBrand: "",
      titleList: "",
      tooltipTime: [],
      vipLevel: localStorage.getItem('vipLevel'),
      vipRootObj: this.$store.state.userRoot, //会员权限对象
      jurisdiction: true,
    };
  },

  created() {
    this.getLiveDataAPI();
  },
  mounted() {
    this.downTimeFn();
    this.getTrafficChartsLine();
    this.getLiveCategoryChartetAPI();
    this.getLiveCategoryRankAPI();
    this.$nextTick(()=>{
      // this.Resize()
    })
    

  },
  watch: {
    // 时间选择器
    KindName: function (newVal) {
      this.timeStamp = {
        data: [],
        flowId: [],
      };
      this.roomData = [];
      this.shopCount = [];
      this.vistorCount = [];
      this.favoriteCount = [];
      this.volume = [];
      this.amount = [];
      this.KindName = newVal;
      this.list = [
        {
          id: 1,
          name: "带货直播间",
          active: false,
          color: '#ffc39b'
        },
        {
          id: 2,
          name: "实时直播在售商品数",
          active: false,
          color: '#f4c14b'
        },
        {
          id: 3,
          name: "实时观看人数",
          active: false,
          color: '#fd7040'
        },

        {
          id: 4,
          name: "实时带货直播间点赞数",
          active: false,
          color: '#3ec0cc'
        },
        {
          id: 5,
          name: "实时直播预估销量",
          active: false,
          color: '#4c94f6'
        },
        {
          id: 6,
          name: "实时直播预估销售额",
          active: true,
          color: '#ff9149'
        },
      ];
      this.getTime();
      // 切换时间，更新折线图，直播品类分布，榜单
      this.getTrafficChartsLine();
      this.getLiveCategoryChartetAPI();
      this.getLiveCategoryRankAPI();
    },
  },

  methods: {
    // Resize() {
    //   var boxDom = document.getElementById('payVipTwo')
    //   let clientWidth = window.screen.width || window.screen.availWidth;
    //   boxDom.style.transform = 'scale(0.5)';
    // },
    update() {
      this.getTime();
      // 切换时间，更新折线图，直播品类分布，榜单
      this.getLiveDataAPI(); //正在直播数据
      this.getTrafficChartsLine();
      this.getLiveCategoryChartetAPI();
      this.childId = "";
      this.getLiveCategoryRankAPI();
      this.lineChart();
    },
    //点击折线图传入的id
    parentID(value) {
      this.childFlowId = value;
      this.getLiveCategoryChartetAPI();
      this.childId = "";
      this.getLiveCategoryRankAPI();
    },
    // 点击品类分布传入的id
    childFn(val) {
      this.childId = val;
      this.getLiveCategoryRankAPI();
    },
    indexesFn(val) {
      this.liveBannerlist = this.liveBanner[val];
    },
    listTitleFn(val) {
      this.titleBrand = val;
      this.titleList = val;
    },
    // 倒计时更新时间
    downTimeFn() {
      let that = this;
      let time = 600;
      setInterval(() => {
        time--;
        let min = Math.floor(time / 60);
        let sec = Math.floor(time % 60);
        min < 10 ? (that.mTime = "0" + min) : (that.mTime = min);
        sec < 10 ? (that.sTime = "0" + sec) : (that.sTime = sec);
        if (time == 0) {
          // 十分钟更新一次数据
          this.getTime();
          // 切换时间，更新折线图，直播品类分布，榜单
          this.getLiveDataAPI(); //正在直播数据
          this.getTrafficChartsLine();
          this.getLiveCategoryChartetAPI();
          this.childId = "";
          this.getLiveCategoryRankAPI();
          this.lineChart();
          time = 600;
        }
      }, 1000);
    },
    lineChart() {
      this.list.forEach((e) => {
        if (e.active) {
          switch (e.name) {
            case "带货直播间":
              this.roomData = e.value;
              break;
            case "实时直播在售商品数":
              this.shopCount = e.value;
              break;
            case "实时观看人数":
              this.vistorCount = e.value;
              break;
            case "实时带货直播间点赞数":
              this.favoriteCount = e.value;
              break;
            case "实时直播预估销量":
              this.volume = e.value;
              break;
            case "实时直播预估销售额":
              this.amount = e.value;
              break;
          }
        }
      });
    },
    // 点击按钮展示折线图
    showLine(item) {
      item.active = !item.active;
      if (item.active) {
        switch (item.name) {
          case "带货直播间":
            this.roomData = item.value;
            break;
          case "实时直播在售商品数":
            this.shopCount = item.value;
            break;
          case "实时观看人数":
            this.vistorCount = item.value;
            break;
          case "实时带货直播间点赞数":
            this.favoriteCount = item.value;
            break;
          case "实时直播预估销量":
            this.volume = item.value;
            break;
          case "实时直播预估销售额":
            this.amount = item.value;
            break;
        }
      } else {
        if (item.id === 1) {
          this.roomData = [];
        } else if (item.id === 2) {
          this.shopCount = [];
        } else if (item.id === 3) {
          this.vistorCount = [];
        } else if (item.id === 4) {
          this.favoriteCount = [];
        } else if (item.id === 5) {
          this.volume = [];
        } else if (item.id === 6) {
          this.amount = [];
        }
        let lastItem = this.list.every((i) => {
          return i.active === false;
        });
        if (lastItem) {
          this.list[5].active = true;
          this.amount = this.list[5].value;
        }
      }
      // 满足点击三个按钮，并且一个按钮是带货直播间，显示右侧y轴坐标
      let newArr = [];
      this.list.forEach((item) => {
        if (item.active) {
          newArr.push(item.name);
        }
      });
      if (newArr.length >= 3) {
        if (!newArr.indexOf("带货直播间")) {
          this.lineY = true;
        } else {
          this.lineY = false;
        }
      } else {
        this.lineY = false;
      }
    },
    // 选择时间
    getTime() {
      switch (this.KindName) {
        case "24小时":
          this.newKindName = 24 + "h";
          break;
        case "近7天":
          this.newKindName = 7 + "d";
          break;
        case "30天":
          this.newKindName = 30 + "d";
          break;
        default:
          this.newKindName = 24 + "h";
      }
    },
    // 获取直播流量大盘折线图接口
    getTrafficChartsLine() {
      this.timeStamp = {
        data: [],
        flowId: [],
      };
      this.loading2 = true;
      this.$axios
        .get(`/api/live/GetLiveLineChart?api-version=2&day=${this.newKindName}`)
        .then((responce) => {
          this.loading2 = false;
          if (responce.data.code === 0) {
            let res = responce.data.data;
            this.timeStamp.flowId = res.flow_id;
            this.tooltipTime = res.time_stamp;
            res.time_stamp.forEach((itemTime) => {
              this.timeStamp.data.push(this.timestamp(itemTime, "h:m:s"));
            });
            this.list.forEach((itemVaule) => {
              if (itemVaule.id === 1) {
                itemVaule.value = res.pro_room_count;
              } else if (itemVaule.id === 2) {
                itemVaule.value = res.pro_line_count;
              } else if (itemVaule.id === 3) {
                itemVaule.value = res.vistor_count;
              } else if (itemVaule.id === 4) {
                itemVaule.value = res.favorite_count;
              } else if (itemVaule.id === 5) {
                itemVaule.value = res.volume;
              } else if (itemVaule.id === 6) {
                itemVaule.value = res.amount;
              }
            });
            this.lineChart();
          }
        });
    },
    // 获取正在直播环比及数据接口
    getLiveDataAPI() {
      this.loading1 = true;
      this.$axios
        .get("/api/live/GetLiveFlowTrend?api-version=2")
        .then((res) => {
          if (res.data.code === 0) {
            this.LiveData = res.data.data;
          }
          this.loading1 = false;
        });
    },
    // 获取直播大盘分类面积图接口
    getLiveCategoryChartetAPI() {
      this.loading3 = true;
      this.$axios
        .get(`/api/live/GetLiveCategoryChartNew?api-version=2`, {
          params: {
            id: this.childFlowId,
            pid: 0,
          },
        })
        .then((resp) => {
          this.treeList = [];
          this.liveBanner = [];
          this.jurisdiction = true;
          if (resp.data.code === 0) {
            let trList = [];
            trList = resp.data.data;
            let min = Math.min.apply(
              Math,
              trList.map((item) => {
                return item.value;
              })
            );
            let lengthNum = trList.length;
            trList.forEach((item, index) => {
              item.value = min * lengthNum;
              lengthNum--;
              this.liveBanner.push(item.children);
              this.titleBrand = trList[0].category_name;
              this.titleList = this.titleBrand;
              this.liveBannerlist = this.liveBanner[0];
              item.indexes = index;
              let { children, ...params } = item;
              this.treeList.push(params);
            });
          } else if(resp.data.code==1003){
            this.jurisdiction = false;
          }
          this.loading3 = false;
        });
    },
    // 获取直播大盘分类榜单接口
    getLiveCategoryRankAPI(item) {
      if (item) {
        this.childId = item.id;
        this.titleList = item.category_name;
      }

      this.loadingList = true;
      this.$axios
        .get("/api/live/GetLiveCategoryRank?api-version=2", {
          params: {
            id: this.childId,
          },
        })
        .then((res) => {
          if (res.data.code === 0) {
            this.rankList = res.data.data;
          }
          this.loadingList = false;
        });
    },
    // 跳转到达人详情
    linkTalentDetail(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/${0}`,
      });
      window.open(router.href, "_blank");
    },
    // 跳转到商品详情
    linkGoodsDetails(id) {
      let router = this.$router.resolve({
        path: `/talent_main/shop_main/${id}/0`,
      });
      window.open(router.href, "_blank");
    },
    // 跳转到达人详情
    toTalent(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/${0}`,
      });
      window.open(router.href, "_blank");
    },
    // 跳转到品牌详情
    BrandDetails(id) {
      let routeUrl = this.$router.resolve({
        path: "/talent_main/brandRoot",
        query: { id },
      });
      window.open(routeUrl.href, "_blank");
    },
  },
};
</script>

<style lang="less" scoped>
#trafficMarket {
  width: 100%;
  min-height: 100vh;
  background: #f1f1f1;
  box-sizing: border-box;
  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }
  // loading居中显示
  .relative {
    position: relative;
  }
  .loading_warp {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .title {
    font-size: 16px;
    color: #222;
    font-weight: 600;
    position: relative;
  }
  .title::before {
    content: "";
    position: relative;
    top: 2px;
    display: inline-block;
    width: 4px;
    height: 16px;
    background: #fd7f2c;
    border-radius: 2px;
  }
  .traffic_market_top {
    width: 100%;
    // height: 157px;
    padding: 26px 20px 20px;
    background-color: #fff;
    border-radius: 4px;
    .header {
      display: flex;
      justify-content: space-between;
      .header_left {
        display: flex;
        .nowTime {
          margin-left: 9px;
          font-size: 14px;
          color: #888;
          line-height: 23px;
        }
        .title::before{
          margin-right: 0;
        }
      }
      .header_right {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #555;
        span {
          cursor: pointer;
        }
        span:hover {
          color: #ff924b;
        }
        .tooltip {
          width: 16px;
          height: 16px;
          margin-left: 5px;
        }
      }
    }
    .main {
      display: flex;
      margin-top: 30px;
      height: 65px;
      .main_box {
        flex: 1;
        .liveRoom {
          font-size: 14px;
          color: #888;
          margin-bottom: 14px;
        }
        .live_room_count {
          white-space: nowrap;
          .count {
            font-family: DINAlternate-Bold;
            font-size: 26px;
            color: #222;
            margin-right: 10px;
          }
          .span {
            font-size: 12px;
            color: #888;
          }
          .img {
            width: 8px;
            height: 12px;
          }
          .percent {
            font-size: 14px;
            font-family: DINAlternate-Bold;
          }
          .upColor {
            color: #ea1b0b;
          }
          .downColor {
            color: #02b389;
          }
        }
      }
      .line {
        width: 1px;
        height: 45px;
        background-color: #efefef;
        margin: auto 0;
        margin-right: 40px;
      }
    }
  }
  .title::before{
    margin-right: 4px;
  }
  .live_trend {
    position: relative;
    margin-top: 10px;
    padding: 14px 14px 0;
    background: #fff;
    .live_trend_header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .trend_wrap {
      margin-top: 11px;
      .trend_list {
        display: flex;
        justify-content: center;
        .trend_item {
          height: 32px;
          line-height: 11px;
          margin-right: 19px;
          border-radius: 4px;
          border: solid 1px #e5e5e5;
          padding: 9px 16px;
          font-size: 14px;
          color: #555;
          cursor: pointer;
        }
        .active_item {
          color: #fd7f2c;
          border-color: #fd7f2c;
        }
      }
    }
  }
  .liveCatecory {
    min-height: 716px;
    padding-right: 0;
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    position: relative;
  }
  .TreeGraph_box {
    width: 100%;
    background-color: #fff;
    padding: 26px 14px 0;
    //  max-width: 1355px;
    table {
      tr:last-child {
        border-bottom: 1px solid #efefef !important;
      }
      tbody {
        height: 556px;
        overflow-y: auto;
        tr {
          height: 78px !important;
        }
      }
    }
  }
  .liveList {
    width: 100%;
    display: flex;
    margin-top: 10px;
    justify-content: space-between;
    position: relative;
    // 表格
    .myTable {
      width: 100%;
      position: relative;
      thead {
        th {
          font-size: 14px;
          color: #888888;
          text-align: center;
          padding-bottom: 9px;
          font-weight: 500;
        }
      }
      tbody {
        td {
          text-align: center;
          font-size: 16px;
          color: #222;
        }
      }
    }
    .mytable01 {
      thead {
        th {
          padding-top: 25px;
          font-weight: 500;
          white-space: nowrap;
        }
        th:nth-of-type(2) {
          text-align: left;
          padding-left: 34px;
        }
      }
      tbody {
        tr {
          height: 78px;
          border-bottom: 1px solid #efefef;
          td {
            white-space: nowrap;
          }
          td:nth-of-type(1) {
            width: 12%;
          }
          td:nth-of-type(2) {
            width: 60%;
          }
          td:nth-of-type(1),
          td:nth-of-type(3) {
            font-family: DINAlternate-Bold;
          }
          .brand {
            cursor: default !important;
          }
          .brand:hover {
            color: #222 !important ;
          }
          .brandText {
            font-size: 14px;
            color: #222222;
            text-align: left;
            padding-left: 34px;
            cursor: pointer;
            width: 180px;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .brandText:hover {
            color: #ff924b;
          }
        }
        tr:last-child {
          border: none;
        }
      }
    }
    .publicTable {
      tbody {
        tr:hover {
          cursor: pointer;
          background-color: #fff7f1;
        }
      }
    }
    .brandSaleNum {
      white-space: nowrap;

      font-size: 15px !important;
    }
    .infoBox {
      box-sizing: border-box;
      padding-left: 20px;
      padding-right: 5px;
      margin-right: 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      cursor: pointer;
      img:nth-of-type(1) {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1px solid #e5e5e5;
      }
      img:nth-of-type(2) {
        width: 14px;
        height: 14px;
        margin-left: 5px;
      }
      span {
        width: 68px;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        padding-left: 7px;
        font-size: 14px;
      }
      span:hover {
        color: #ff924b;
      }
    }
    .Nnum {
      color: #222 !important;
    }

    .liveListTalent {
      // flex: 0.5;
      width: 330px;
      padding: 26px 20px 0;
      background: #fff;
      .infoBox {
        span {
          display: inline-block;
        }
      }
    }
    .liveListShop {
      width: 1021px;
      flex: 1;
      padding: 26px 20px 0;
      background: #fff;
      margin: 0 10px;
      .mytable02 {
        margin-top: 25px;
        thead {
          th {
            font-weight: 500;
            white-space: nowrap;
          }
        }
        tbody {
          tr {
            td {
              padding: 0 2px;
            }
            height: 78px;
            border-bottom: 1px solid #efefef;
            td:nth-of-type(2) {
              width: 34%;
            }
            td:nth-of-type(1),
            td:nth-of-type(3),
            td:nth-of-type(4),
            td:nth-of-type(5) {
              font-family: DINAlternate-Bold;
            }
            td:nth-of-type(6) {
              width: 18%;
            }
            td:nth-of-type(5) {
              font-size: 16px;
              color: #222;
            }
          }
          tr:last-child {
            border: none;
          }
        }
      }
      .goodsInfo {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 10px;
        cursor: pointer;
        img {
          width: 50px;
          height: 50px;
          border-radius: 6px;
          border: 1px solid #e5e5e5;
        }
        span {
          flex: 1;
          text-align: left;
          font-size: 14px;
          color: #222222;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          padding-left: 9px;
        }
        span:hover {
          color: #ff924b;
        }
      }
      .goodsTable {
        tbody {
          tr:hover {
            cursor: pointer;
            background-color: #fff7f1;
          }
        }
      }
      .infoBox {
        justify-content: center;
      }
    }
    .liveListBrand {
      width: 330px;
      padding: 26px 20px 0;
      background: #fff;
      .mytable03 {
        tbody {
          tr {
            height: 78px !important;
          }
        }
      }
    }
    .list_vip_wrap{
      width: 100%;
      height: 880px;
      // position: absolute;
      top: 0;
      left: 0;
      background: url("~@/assets/shi/categoryLIst.png") no-repeat;
      background-size: 100% 100%;
      padding-top: 50px;
    }
  }
  .Market_vip_wrap{
    width: 100%;
    height: 716px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url("~@/assets/shi/categoryTop.png") no-repeat;
    background-size: 100% 100%;
    // .Market_bgc_wrap{
    //   width: 100%;
    //   height: 100%;
    //   position: absolute;
    //   display: flex;
    //   .Market_left{
    //     height: 100%;
    //     flex: 1;
    //     background-color: red;
    //   }
    //   .Market_right{
    //     width: 330px;
    //     background-color: blue;
    //     margin-left: 10px;
    //   }
    // }
    .payVip_wrap{
      width: 80%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }
  }
  .pay_vip_box{
    transform: scale(0.8);
  }
  .treeClass {
    padding: 26px 0 0 20px;
    background-color: #fff;
    margin-left: 10px;
    .thead_second {
      display: flex;
      height: 53px;
      font-size: 14px;
      color: #888;
      text-align: center;
      padding-bottom: 9px;
      li {
        padding-top: 25px;
        white-space: nowrap;
      }
      li:nth-of-type(2) {
        width: 113px;
        text-align: left;
        padding-left: 39px;
      }
      li:nth-of-type(3) {
        width: 75px;
        margin-left: 73px;
      }
    }
    .tbody_box {
      height: 558px;
      overflow-y: auto;
      padding-right: 20px;
    }
    .tbody_second {
      width: 290px;
      text-align: center;
      height: 78px;
      color: #222;
      cursor: pointer;
      display: flex;
      border-bottom: 1px solid #efefef;
      li {
        white-space: nowrap;
        line-height: 78px;
      }
      li:nth-of-type(1) {
        font-size: 15px;
        width: 12%;
        font-family: DINAlternate-Bold;
      }
      li:nth-of-type(2) {
        width: 50%;
        font-size: 14px;
        text-align: left;
        padding-left: 34px;
      }
      .brandText {
        span {
          width: 110px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: inline-block;
          -webkit-line-clamp: 1;
        }
      }
      .brandText:hover {
        color: #ff924b;
      }
      li:nth-of-type(3) {
        width: 78px;
        text-align: center;
        font-size: 15px;
        font-family: DINAlternate-Bold;
        margin-left: 32px;
      }
    }
    .tbody_second:hover {
      background-color: #fff7f1;
    }
  }
  .no_data {
    position: absolute;
    height: 200px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #b5b5b5;
  }
  .noDataH {
    min-height: 253px;
  }
}
</style>